import React, { Component } from "react";
import './3.css';
export default class SlideCom extends Component {
  // 1. 声明状态
  state = {
    num: 1
  }

  render() {
    return (
      <div className="container">
        <div className="slider-wrapper">
          {/* 2. 使用状态 */}
          <img src={`/images/${this.state.num}.jpg`} alt="" width="100%" />
          <div onClick={this.prev} className="prev btn">&lt;</div>
          <div onClick={this.next} className="next btn">&gt;</div>
        </div>
      </div>
    );
  }

  // 3. 绑定事件 下一个按钮的单击事件
  next = () => {
    const{num}=this.state
    this.setState({
      num:num===5?1:num+1
    })
  }

  //上一个按钮的单击事件
  prev = () => {
    const{num}=this.state
    this.setState({
      num:num===1?5:num-1
    })
  }
}
